import useAlLayoutEffect from '@/layouts/hooks/alLayoutEffect'
import { RouteRecordRaw, useRouter, useRoute } from 'vue-router'
import { computed, ref, watch } from 'vue'
import advancedMenuConfiguration from '@/layouts/advancedMenuConfiguration.json'
import DpaMenu from '@/layouts/dpaMenu.json'
import LayoutConfig from '@/layouts/layoutConfig.json'
import { find } from 'lodash-es'
import { useLayoutStore } from '@/store/modules/layout'

// @ts-ignore
const useAlLayoutMenu = function () {
    const { setMenuListByPermission } = useAlLayoutEffect({})
    const layoutStore = useLayoutStore()
    const layoutMap = layoutStore.getLayoutMap

    const router = useRouter()
    const route = useRoute()
    const menuExpandKeys = ref([])
    // 构建菜单信息
    const buildMenuInfo = (router: RouteRecordRaw) => {
        if (!router.meta?.hideMenu) {
            const menuInfo = {
                name: router.name,
                title: router.meta?.title ? router.meta?.title : router.name,
                code: router?.meta?.code ? router.meta.code : '',
                icon: router.meta?.icon,
                children: [] as any[]
            }
            if (router.meta?.menuExpandFlag && router.name) {
                menuExpandKeys.value.push(router.name)
            }
            if (!router.meta?.hideChildrenInMenu) {
                // 不隐藏子菜单
                const children = router.children?.map(router => buildMenuInfo(router)).filter(item => item !== null)
                if (children && children.length > 0) {
                    menuInfo.children = menuInfo.children.concat(children)
                }
            }
            return menuInfo
        } else {
            return null
        }
    }

    const selectedKeys = computed(() => {
        return [router.currentRoute.value.name]
    })

    const getMenuName = menuItem => {
        const { contentSetting, menuId } = menuItem
        const MENU_NAME_MAP = {
            FORM_LIST: 'menu_form_',
            TABLE_LIST: 'menu_table_',
            PAGE_LIST: 'menu_page_',
            SYSTEM_MENU: 'menu_system_',
            BI_DASH_BOARD: 'menu_bi_publish_',
            VISUALIZATION_LARGE_SCREEN: 'menu_visualization_publish_',
            ALLIN_RESOURCE_MENU: 'menu_resource_',
            CUSTOM_PAGE: 'menu_custom_page_'
        }

        if (!contentSetting.settingId) {
            return 'menu_page_' + menuId
        }
        if (contentSetting.settingType === 'CUSTOM_PAGE') {
            return MENU_NAME_MAP[contentSetting.settingType] + menuId
        } else {
            return MENU_NAME_MAP[contentSetting.settingType] + contentSetting.settingId
        }
    }
    // 获取布局id
    function getLayoutId(current: any, pageConfiguration: any) {
        const { layoutPageConfig } = pageConfiguration;
        const layoutInfo = layoutPageConfig.filter((item: any) => {
            return current.menuUrl === item.menuUrl;
        })
        return layoutInfo.length ? layoutInfo[0].layoutPlanId : ''
    }
    const menuInfo: any = ref([])
    const isAdvancedLayout = ref(false)
    // 构建菜单信息
    const buildMenuInfoAdvanced = (menuList: any, pageConfiguration: any) => {
        const menuListInfo: any = []
        menuList.forEach(item => {
            const menuItem = {
                name: getMenuName(item) + getLayoutId(item, pageConfiguration),
                title: item?.title,
                code: item?.code ? item.code : '',
                icon: item?.icon,
                children: [] as any[]
            }
            const children = buildMenuInfoAdvanced(item.children, pageConfiguration)
            if (children && children.length > 0) {
                menuItem.children = menuItem.children.concat(children)
            }
            menuListInfo.push(menuItem)
        })
        return menuListInfo
    }

    watch(
        () => route,
        newVal => {
            // 根据当前路由获取布局id
            const {
                meta: { layoutPlanId: metaLayoutPlanId },
                fullPath,
                query
            } = newVal || { meta: {}, fullPath: '' }
            // 如果路由中携带了layoutPlanId参数，以路由中的参数为准
            let layoutPlanId = query && query.layoutPlanId ? query.layoutPlanId : metaLayoutPlanId

            if (!layoutPlanId && layoutMap) {
                const _currentLayout = find(layoutMap, { url: fullPath })
                if (_currentLayout) {
                    layoutPlanId = _currentLayout.layoutPlanId
                }
            }

            // 如果有布局，获取布局方式
            if (layoutPlanId && layoutPlanId !== 'DPA_NAVIGATION_OTHER') {
                const { layoutConfiguration, pageConfiguration } = advancedMenuConfiguration
                const _currentLayout = find(layoutConfiguration, { id: layoutPlanId })
                if (_currentLayout && _currentLayout.layoutPlan !== 'DPA_NAVIGATION') {
                    const menus = buildMenuInfoAdvanced(_currentLayout.menuConfigurationList, pageConfiguration);
                    menuInfo.value = setMenuListByPermission(menus);
                } else {
                    menuInfo.value = _currentLayout.dpaMenuConfiguration
                }
                isAdvancedLayout.value = true
            } else if (LayoutConfig.layoutPlan !== 'DPA_NAVIGATION') {
                menuExpandKeys.value = []
                const menuList = router
                    .getRoutes()
                    .filter(router => router.meta.isLayout)
                    .map(item => item.children)
                    .filter(item => item !== null && item !== undefined)
                    .flatMap(item => item)
                    .map(item => buildMenuInfo(item))
                    .filter(item => item !== null)
                menuInfo.value = setMenuListByPermission(menuList) || []
            } else {
                menuInfo.value = DpaMenu
            }
        },
        {
            immediate: true,
            deep: true
        }
    )

    return {
        selectedKeys,
        isAdvancedLayout,
        menuInfo,
        menuExpandKeys
    }
}
export default useAlLayoutMenu
